<script setup lang="ts">
type PropsState = {
  user: any
}
const props = withDefaults(defineProps<PropsState>(), {
  user: () => {
    return {}
  }
})
const router = useRouter()
const emit = defineEmits(['follow', 'close'])
const handFollow = () => {
  emit('follow')
}
const handUser = () => {
  emit('close')
  router.push({
    path: '/userPage',
    query: {
      id: props.user.id
    }
  })
}
</script>

<template>
  <div class="nav-userinfo flex align-center">
    <img @click="handUser" class="avatar" :src="user.avatar" alt="头像" />
    <div class="info">
      <div class="flex align-center">
        <div class="name" @click="handUser">@{{ user.nickname }}</div>
      </div>
      <div class="tags flex align-center">
        <div class="tag">作品: {{ user.photo_num_count }}</div>
      </div>
    </div>
    <n-button size="small" round type="error" @click="handFollow">
      <span v-if="user.is_follow">取消关注</span>
      <span v-else>关注</span>
    </n-button>
  </div>
</template>

<style scoped lang="scss">
.nav-userinfo {
  padding: 16px 10px 10px 10px;

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 6px;
    cursor: pointer;
  }

  .info {
    flex: 1;
    margin-right: 20px;

    .name {
      font-size: 15px;
      cursor: pointer;
    }

    .tags {
      margin-top: 10px;

      .tag {
        font-size: 12.4px;
        position: relative;
        padding: 0 8px;

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }

        &:not(:last-child) {
          &:before {
            content: '';
            position: absolute;
            width: 2px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.6);
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}
</style>
